<template>
  <view>
    <!-- 
			priceList            带有价格库存的数组
			currentYear          当前显示的年份
			currentMonth         当前显示的月份
			currentDay           当前显示的日
			stateTypeName        后台接口库存状态的字段名
			priceName            后台接口价格的字段名
			stockName            后台接口库存的字段名
			soldName             后台接口销量的字段名
			hightLightDate       当选选中的高亮日期
			startDateStamp       规定日历加载的初始时间戳，初始日期前均不可选择
			calendarThemeColor   日历的主题色
			canChooseDate        加载的日历是否具备可选择日期效果
			getDate              选择日期返回的日期对象{
															day: "2020-04-30"
															price: ""
															stock: ""
															timeStamp: 1588204800
														}
    -->
    <calendar
      ref="calendar"
      :price-list="priceList"
      :current-year="currentYear"
      :current-month="currentMonth"
      :current-day="currentDay"
      :state-type-name="stateTypeName"
      :price-tag-name="priceName"
      :stock-tag-name="stockName"
      :sold-tag-name="soldName"
      :hight-light-date="hightLightDate"
      :start-date-stamp="startDateStamp"
      :calendarThemeColor="calendarThemeColor"
      @get-date-obj="getDate"
    >
      <template v-slot:prevMonth>
        <view class="prevBtn" @click="lastMonthEvent">
          <text
            :style="'border-top: 2rpx solid #' + (showPrevBtn ? '888;':'d3d3d3;')+'border-left: 2rpx solid #'+(showPrevBtn ? '888;':'d3d3d3;')"
          ></text>
        </view>
      </template>
      <template v-slot:nextMonth>
        <view class="nextBtn" @click="nextMonthEvent">
          <text></text>
        </view>
      </template>
    </calendar>
  </view>
</template>

<script>
import calendar from "@/components/calendar/calendar";
import { _getTimeYear, _getTimeMonth, _getTimeDay,_getTimeDate } from "@/utils/DateFun";
let DATE_YEAR = 0; //加载日历时的现在年（电脑时间）
let DATE_MONTH = 0; //加载日历时的现在月（电脑时间）
let DATE_DAY = 0; //加载日历时的现在日（电脑时间）
export default {
  data() {
    /**
     * 页面的初始数据
     * priceName       后台数据价格的字段名
     * stockName       后台数据库存的字段名
     * stateTypeName   后台数据库存状态的字段名
     * soldName        后台数据销量的字段名
     * startYear       日历遍历的起始年
     * startMonth      日历遍历的起始月
     * startDay        日历遍历的起始日
     * startDateStamp  日历遍历的起始日期的时间戳
     * checkDateObj    点击选中的日期对象
     * canChooseDate   设置日期是否可选中
     * hightLightDate  高亮日期
     * priceList       价格日历
     * currentYear     当前显示的年
     * currentMonth    当前显示的月
     * currentDay      当前显示的日
     * calendar        日历组件实例
     * ifShowPriceStock    判断是否需要显示库存价格的页面
     * showPrevBtn			判断是否显示切换上个月的箭头
     * calendarThemeColor  日历的主题色
			*/
    return {
      priceName: "marketPrice",
      stockName: "stockCount",
      stateTypeName: "state",
      soldName: "soldCount",
      startDateStamp: 0,
      startYear: 0,
      startMonth: 0,
      startDay: 0,
      checkDateObj: {},
      canChooseDate: false,
      hightLightDate: 0,
      priceList: [],
      currentYear: this.$store.state.DATE_YEAR,
      currentMonth: this.$store.state.DATE_MONTH,
      currentDay: this.$store.state.DATE_DAY,
      chooseNum: 1,
      ifShowPriceStock: false,
      showPrevBtn: true,
      calendarThemeColor: "#F79727"
    };
  },
  components: {
    calendar
  },
  onLoad(options) {
    DATE_YEAR = this.$store.state.DATE_YEAR;
    DATE_MONTH = this.$store.state.DATE_MONTH;
    DATE_DAY = this.$store.state.DATE_DAY;
    let startDateStamp = options.startDateStamp;
    if (options.hightLightDate !== 0) {
      //如果有选择（高亮）日期，那么当前日历遍历出的应显示高亮日期的年月日
      this.currentYear = _getTimeYear(options.hightLightDate);
      this.currentMonth = _getTimeMonth(options.hightLightDate);
      this.currentDay = _getTimeDay(options.hightLightDate);
      this.hightLightDate = options.hightLightDate;
      //设定默认选中的日期对象
      let checkDateObj = {};
      checkDateObj.date = _getTimeDate(options.hightLightDate);
      checkDateObj.timeStamp = options.hightLightDate;
      this.checkDateObj = checkDateObj;
      uni.setStorageSync("chooseDate", checkDateObj);
    }
    if (startDateStamp !== 0) {
      // 如果有规定起始日期，设置起始年，月，日
      this.startYear = _getTimeYear(startDateStamp);
      this.startMonth = _getTimeMonth(startDateStamp);
      this.startDay = _getTimeDay(startDateStamp);
      this.startDateStamp = startDateStamp;
    }
    if ( this.currentYear == this.startYear && this.currentMonth <= this.startMonth ) {
      // 当前年月为规定的起始年和月，则切换不了上个月
      this.showPrevBtn = false;
    }
    //从需要显示价格库存日历页面跳转，则日历组件需要调用获取价格库存数组的接口
    if (options.ifShowPriceStock == 'true') {
      this.ifShowPriceStock = options.ifShowPriceStock;
      this.getPriceCalendarData();
    }
  },
  methods: {
    /**
     * @desc 请求价格日历接口，这里用假数据
     */
    getPriceCalendarData() {
      this.priceList = this.$store.state.priceList;
    },

    /**
     * @desc 切换上个月。全部时间的月份都是按0~11基准，显示月份才+1
     */
    lastMonthEvent() {
      if (this.showPrevBtn) {
        // 计算切换上个月的年
        let year =
          this.currentMonth - 1 < 1 ? this.currentYear - 1 : this.currentYear;
        // 计算切换上个月的月
        let month = this.currentMonth - 1 < 1 ? 12 : this.currentMonth - 1;
        // 计算切换上个月的日。如果切换后的年和月是当前电脑的时间，则日为起始遍历日历规定的日，否则为每个月的第一天(为了请求月头到月尾的价格库存的接口)
        let day = year == DATE_YEAR && month == DATE_MONTH ? this.startDay : 1;
        this.currentYear = year;
        this.currentMonth = month;
        this.currentDay = day;
        if (this.ifShowPriceStock) {
          //需要显示库存和价格的日历，切换月份需重新请求获取价格日历对象
          this.getPriceCalendarData();
        }
        //获取日历组件实例，并调用组件里定义的切换上个月事件
        this.$refs.calendar._lastMonthEvent(year, month);
        if (
          year < this.startYear ||
          (year == this.startYear && month == this.startMonth)
        ) {
          // 如果切换后计算的年月小于起始遍历日历的年月，则不切换
          this.showPrevBtn = false;
        }
      }
    },

    /**
     * @desc 切换下个月。全部时间的月份都是按0~11基准，显示月份才+1
     */
    nextMonthEvent() {
      this.showPrevBtn = true;
      // 计算切换下个月的年
      let year = this.currentMonth + 1 > 12 ? this.currentYear + 1 : this.currentYear;
      // 计算切换下个月的月
      let month = this.currentMonth + 1 > 12 ? 1 : this.currentMonth + 1;
      // 计算切换下个月的日。如果下个月的年和月是当前电脑的时间，则日为当前电脑的日（起始日可能会遍历提前一个月的日），否则为每个月的第一天(为了请求月头到月尾的价格库存的接口)
      let day = year == DATE_YEAR && month == DATE_MONTH ? DATE_DAY : 1;
      this.currentYear = year;
      this.currentMonth = month;
      this.currentDay = day;
      if (this.ifShowPriceStock) {
        //需要显示库存和价格的日历，切换月份需重新请求获取价格日历对象
        this.getPriceCalendarData();
      }
      //获取日历组件实例，并调用组件里定义的切换下个月事件
      this.$refs.calendar._nextMonthEvent(year, month);
    },

    /**
     * @desc 返回选中的日期对象
     * @property {string} date - 选中的带格式的日期
     * @property {string} timeStamp - 选中日期的时间戳
     * @property {string} unitPrice - 单价
     * @property {string} stock - 库存
     */
    getDate(e) {
      let checkDateObj = this.checkDateObj;
      if (checkDateObj.timeStamp) {
        checkDateObj.date = e.day;
        checkDateObj.timeStamp = e.timeStamp;
        checkDateObj.unitPrice = e.price;
        checkDateObj.stock = e.stock;
        this.checkDateObj = checkDateObj;
        // 选中日期并存储日期对象
        uni.setStorageSync("chooseDate", checkDateObj);
      } 
      // 选择日期后回退上一页 delta(默认为1) 页面
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style lang="scss">
@import "main";
</style>
